keyed {#each}

Posted on 2023-02-07 by

henrikvilhelmberglund

In Svelte there's a keyed each block .

In the each block Svelte thinks "what is showing and what is going to show ?" and if what is showing and what is going to show doesn't change, nothing happens, the elements are reused .

You can see this if you right click red and inspect before clicking the button.

  • red
  • green
  • blue

App.svelte

<script>
	let colors = ["red", "green", "blue"];

	function addColors() {
		colors.push("yellow");
		colors = colors;
	}
</script>

<button on:click={addColors}>Click me</button>

<ul>
	{#each colors as color, i}
		<li>{color}</li>
	{/each}
</ul>

After clicking the button you should notice that only the newly added element flashes in the element list because the other elements didn't change .

What happens if we push the yellow color into the array at another position though?

  • red
  • green
  • blue

App2.svelte

<script>
	let colors = ["red", "green", "blue"];

	function addColors() {
		colors.splice(2, 0, "yellow");
		colors = colors;
	}
</script>

<button on:click={addColors}>Click me</button>

<ul>
	{#each colors as color, i}
		<li>{color}</li>
	{/each}
</ul>

As you can see in the developer tools two elements flash because the text of the blue element was changed into yellow and a new element was added with the text set to blue .

In the below example it's more clear that we're changing the text because the initial color doesn't change .

  • red
    • Color: red, initial color: red
  • green
    • Color: green, initial color: green
  • blue
    • Color: blue, initial color: blue

App3.svelte

<script>
	import Component from "./Component.svelte";
	let colors = ["red", "green", "blue"];

	function addColors() {
		colors.splice(2, 0, "yellow");
		colors = colors;
	}
</script>

<button on:click={addColors}>Click me</button>

<ul>
	{#each colors as color, i}
		<li>{color}</li>
		<Component {color} />
	{/each}
</ul>

Component.svelte

<script>
	import { onMount } from "svelte";
	export let color;
	let initialColor = color;
	onMount(() => {
		console.log(color);
	});
</script>

Color: {color}, initial color: {initialColor}

So, is there a way to tell Svelte that we want to rearrange the elements?

Yes, using the keyed each block . You can think of the key as an identifier , meaning, "use this key to compare ".

  • red (key: red)
    • Color: red, initial color: red
  • green (key: green)
    • Color: green, initial color: green
  • blue (key: blue)
    • Color: blue, initial color: blue

App4.svelte

<script>
	import Component from "./Component.svelte";
	let colors = ["red", "green", "blue"];

	function addColors() {
		colors.splice(2, 0, "yellow");
		colors = colors;
	}
</script>

<button on:click={addColors}>Click me</button>

<ul>
	{#each colors as color (color)}
		<li>{color} (key: {color})</li>
		<Component {color} />
	{/each}
</ul>

If you click the button you can see that only one element flashes because the other ones are simply rearranged.

You also got an error if you click it multiple times as you cannot have duplicate keys in a keyed each block .

Even if we reverse the array like in the example below it works:

  • red (key: red)
    • Color: red, initial color: red
  • green (key: green)
    • Color: green, initial color: green
  • blue (key: blue)
    • Color: blue, initial color: blue

App5.svelte

<script>
	import Component from "./Component.svelte";
	let colors = ["red", "green", "blue"];

	function addColors() {
		colors.splice(2, 0, "yellow");
    colors.reverse();
		colors = colors;
	}
</script>

<button on:click={addColors}>Click me</button>

<ul>
	{#each colors as color (color)}
		<li>{color} (key: {color})</li>
		<Component {color} />
	{/each}
</ul>

Keyed each blocks will become important when we use transitions since we need to keep references to the elements for them to move correctly .